<div class="h-100 d-flex align-items-center">
  <div class="widget-container" (cdkDropListDropped)="drop($event)" cdkDropList>
    <div class="header">Select a widget</div>
    <div class="clear" (click)="clearWidget()">Clear widget</div>
    <div
      *ngFor="let item of this.widgetService.listOfComponent; let i = index"
      cdkDrag
    >
      <div
        class="widget"
        [ngClass]="{ active: item.active }"
        (click)="addWidget(i)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</div>
